<template>
  <div class="menus_content users_content">
    <div class="card-container">
      <div class="header">
        <el-form
          class="demo-form-inline"
          size="mini"
          label-position="right"
          label-width="100px"
          ref="queryMenuRef"
          :model="formOptions"
        >
          <div class="row">
            <div class="col">
              <el-form-item label="菜单名称">
                <el-input
                class="menu-name"
                  v-model="formOptions.name"
                  placeholder="菜单名称"
                ></el-input>
              </el-form-item>
            </div>
            <div class="col">
              <el-form-item
                label="是否需要鉴权"
                style="margin-left: 20px"
              >
                <el-select
                  v-model="formOptions.requireAuth"
                  placeholder="请选择"
                >
                  <el-option
                    label="是"
                    :value="true"
                  ></el-option>
                  <el-option
                    label="否"
                    :value="false"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="col">
              <el-form-item label="是否可用">
                <el-select
                  v-model="formOptions.enabled"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item,i) in $dictionaryList('状态')"
                    :key="i"
                    :label="item.name"
                    :value="item.code=='true'"
                  ></el-option>
                  <!-- <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option> -->
                </el-select>
              </el-form-item>
            </div>
            <div class="col"></div>
            <div style="width:250px">
              <el-button
                class="header-btn"
                type="primary"
                @click="queryMenus"
                size="mini"
              ><img
                    src="../../../assets/img/globalTable/icon1-search.png"
                    alt=""
                  >查询</el-button>
              <el-button
                class="header-btn"
                style="margin-left: 10px"
                size="mini"
                type="primary"
                @click="addClick()"
              ><img
                    src="../../../assets/img/globalTable/icon3-add.png"
                    alt=""
                  >
                添加
              </el-button>
              <el-button
                class="header-btn"
                style="margin-left: 10px"
                size="mini"
                type="primary"
                @click="sortClick"
              ><img
                    src="../../../assets/img/globalTable/icon2-reset.png"
                    alt=""
                  >
                编辑
              </el-button>
            </div>
          </div>
        </el-form>
      </div>
      <el-card
        :body-style="{ paddingTop: '0px' }"
        shadow="never"
      >
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          size="mini"
          :height="tableHeight"
        >
          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
          ></el-table-column>
          <!-- <el-table-column
          label="菜单标识"
          prop="id"
          min-width="120"
          fixed
        ></el-table-column> -->
          <el-table-column
            label="菜单名称"
            prop="name"
          ></el-table-column>
          <el-table-column
            label="后台资源地址"
            prop="url"
          ></el-table-column>
          <el-table-column
            label="前台页面路径"
            prop="path"
          ></el-table-column>
          <el-table-column
            label="前台组件名称"
            prop="component"
          ></el-table-column>
          <el-table-column
            label="菜单图标"
            prop="iconLs"
          ></el-table-column>
          <el-table-column
            label="菜单类型"
            prop="menuType"
          ></el-table-column>
          <el-table-column
            label="菜单顺序"
            prop="menuSort"
          ></el-table-column>

          <el-table-column
            prop="enabled"
            label="是否可用"
            show-overflow-tooltip
          >
            <template slot-scope="scope">{{
            scope.row.enabled ? "是" : "否"
          }}</template>
          </el-table-column>
          <el-table-column
            prop="requireAuth"
            label="是否需要鉴权"
            show-overflow-tooltip
          >
            <template slot-scope="scope">{{
            scope.row.requireAuth ? "是" : "否"
          }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row, $index }">
              <!-- <el-button type="primary" size="small" icon="el-icon-share"
              >详情</el-button
            > -->
              <span
                class="operate-btn"
                type="primary"
                size="mini"
                @click="handleClick(row)"
              >
                编辑
              </span>
              <span
                class="operate-btn"
                type="primary"
                size="mini"
                @click="deleteMenu(row, $index)"
              >
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginationOptions.pageNo"
            :page-sizes="paginationOptions.pageSizes"
            :page-size="paginationOptions.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginationOptions.total"
            size="mini"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <user-edit-dialog
      :toChild="list"
      ref="menusEditDialogRef"
    ></user-edit-dialog>
    <menusSort ref="menusSortRef"></menusSort>
  </div>
</template>

<script>
import { queryMenu, queryMenuAll, deleteMenu } from "@/api/menu";
import UserEditDialog from "@/views/sysmanage/menus/dialog/menusEdit.vue";
import menusSort from "./dialog/menusSort.vue";
export default {
  components: {
    UserEditDialog,
    menusSort,
  },
  data () {
    return {
      tableData: [],
      list: "",
      dialogStatus: "",
      formOptions: {
        name: "",
        requireAuth: true,
        enabled: true,
      },
      paginationOptions: {
        pageNo: 1,
        pageSizes: [10, 20, 30, 40],
        pageSize: 10,
        layout: "total, sizes, prev, pager, next, jumper",
        total: 40,
      },
    };
  },
  computed: {
    tableHeight () {
      return this.$store.state.tableHeight - 440;
    }
  },
  mounted () {
    this.queryMenus();
  },
  methods: {
    queryMenus () {
      this.$refs["queryMenuRef"].validate((valid) => {
        if (valid) {
          console.log(valid, "validvalidvalid");
          let data = { records: [{ ...this.formOptions }] };
          data.current = this.paginationOptions.pageNo;
          data.size = this.paginationOptions.pageSize;
          console.log("data---------", data);
          queryMenu(data).then((res) => {
            console.log(res, "res++++++++++");
            if (res && res.code && res.code === "00000") {
              this.resetForm("queryMenuRef"); // 重置表单
              this.tableData = res.data.records; // 表格数据赋值
              console.log(this.tableData, "我是tableData");
              console.log(res.data, " res.data.totalElements");
              this.paginationOptions.total = res.data.total; // 分页器赋值
            }
          });
        } else {
          return false;
        }
      });
    },
    // 删除弹框
    deleteMenu (row, index) {
      this.$confirm("此操作将永久删除该菜单, 是否继续?", "删除菜单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
        modal: false,
      })
        .then(() => {
          this.tableData.splice(index, 1);
          // 点击确认，发起后台请求，删除该用户
          deleteMenu(row.id).then((res) => {
            console.log(res, "点击确认，发起后台请求，删除该用户");
            if (res.code == "00000") {
              return this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "success",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          // 点击取消，取消该操作
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 添加
    addClick () {
      this.$refs.menusEditDialogRef.openDialog();
      this.list = "添加菜单";
      console.log("我要添加");
    },
    // 编辑&
    handleClick (row) {
      this.$refs.menusEditDialogRef.openDialog(row);
      this.list = "编辑菜单";
      console.log("编辑", row, row.id);
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 表格复选动作
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    // 分页器 页容量变更行为
    handleSizeChange (val) {
      console.log(val, "分页的val");
      this.paginationOptions.pageSize = val;
      this.queryMenus();
    },
    // 分页器 页码变更行为
    handleCurrentChange (val) {
      this.paginationOptions.pageNo = val;
      this.queryMenus();
    },
    indexMethod (index) {
      return (
        (this.paginationOptions.pageNo - 1) * this.paginationOptions.pageSize +
        index +
        1
      );
    },
    sortClick () {
      this.$refs.menusSortRef.dialogFormVisible = true;
    },
  },
};
</script>
<style lang='less' scoped>
// .col {
//   &:last-child {
//     float: right;
//     text-align: right;
//     padding-right: 26px;
//   }
// }

// .header-btn img {
//   width: 10px;
//   margin-right: 2px;
// }
</style>
